<template>
    <div>
        <div class="close" @click="$router.push('/')">
            <i class="iconfont iconicon-test"></i>
        </div>
        <div class="logo">
            <i class="iconfont iconnew"></i>
        </div>
        <AuthInput 
        type="text" 
        placeholder="用户名/手机号码" 
        rule="^1[3456789]\d{9}$"
        errMsg="请输入正确的手机号码"
        @valChanged="setUserName" />
        <AuthInput 
        type="password" 
        placeholder="密码" 
        rule="^\d{6}$"
        errMsg="密码有误"
        @valChanged="setPassword"/>
        <!-- 去注册 -->
        <div class="toRegister">无账号，<a href="javascript:void(0)" @click="$router.push('/register')">去注册</a></div>
        <AuthBtn btnTxt="登  录" @btnClicked="login" :isValid="isValid"/>
    </div>
</template>

<script>
import AuthInput from '@/components/AuthInput';
import AuthBtn from '@/components/AuthBtn';
export default {
    data(){
       return{
           username:'',
           password:'',
           isValid:true
       }
    },
    components:{
        AuthInput,
        AuthBtn
    },
    methods:{
        setUserName(username){
            this.username = username;
            this.testAllVal();
        },
        setPassword(password){
            this.password = password;
            this.testAllVal();
        },
        testAllVal(){
            const regExpName = new RegExp(/^1[3456789]\d{9}$/);
            const regExpPass = new RegExp(/^\d{6}$/);
            if(!regExpName.test(this.username) || !regExpPass.test(this.password)){
               this.isValid = false;
            }else{
                this.isValid = true;
            }
        },
        login(){
            if(!this.username || !this.password){
                this.$toast.fail('请输入手机号码或密码');
                return;
            }
            this.$axios({
                url:'/login',
                method:'post',
                data:{
                    username:this.username,
                    password:this.password
                }
            }).then((res)=>{
                if(res.data.message != '登录成功'){
                    this.$toast.fail(res.data.message);
                }else{
                    // 本地储存
                    localStorage.setItem('token',res.data.data.token);
                    localStorage.setItem('userId',res.data.data.user.id);
                    // 跳转到首页
                    this.$router.replace({path: '/'});
                    this.$toast.success(res.data.message);
                }
            })
        }
    }
}
</script>

<style lang="less" scoped>
.close{
    padding:6.667vw;//24
    .iconicon-test{
        font-size: 7.5vw;
        color: #c0c0c0;
    }
}
.logo{
    height: 27.778vw;
    line-height: 27.778vw;
    text-align: center;
    .iconnew{
        font-size: 36.111vw;
        color: #ffc0cb;
    }
}
.toRegister{
    padding:5.556vw 6.111vw 0 6.111vw;
    text-align: right;
    font-size: 3.333vw;
    color: #c0c0c0;
    a{
       font-size: 3.333vw;
       color: #ffc0cb;
    }
}
</style>